<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tooltip with Spry Data</title>
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../widgets/tooltip/SpryTooltip.css" type="text/css" />
<script src="../../includes/xpath.js" type="text/javascript"></script>
<script src="../../includes/SpryData.js" type="text/javascript"></script>
<script src="../../widgets/tooltip/SpryTooltip.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("../../data/employees-02.xml", "employees/employee");
//-->
</script>
<style type="text/css">
<!--
#tooltip {
	border: 1px solid #666666;
	padding: 4px;
}
-->
</style>
</head>
<body>
<h3>Using Spry Data with the Tooltip Widget</h3>
<p>In this sample, we will make the common master/detail pattern, but with the tooltip, the detailregion will be the tooltip. The table will serve as the tooltip trigger. Notice that in this sample, we use Observers (<a href="../../articles/data_set_overview/index.html#observers">documentation</a> and <a href="RegionObserverSample.html">sample</a>) to regenerate the Tooltip after each data update.</p>
<!-- ID on main region for the Observer. -->
<div spry:region="ds1" id="mainRegion">
  <table>
    <tr>
      <th>Name</th>
    </tr>
    <!-- Set the onMouseOver event to trigger the detail region update. The class name 'trigger' is used in the constructor. -->
    <tr spry:repeat="ds1" onmouseover="ds1.setCurrentRow('{ds_RowID}');" class="trigger">
      <td>{firstname} {lastname}</td>
    </tr>
  </table>
</div>
<!-- The tooltip container. The id is used in the constructor. -->
<span spry:detailregion="ds1" id="tooltip" class="tooltipContent">Phone:{phone}<br />
  UserName:{username}<br />
  ID:{@id}</span>
  <!-- The Observer script. Add an observer to run the tooltip constructor after the detail region is loaded. 'mainRegion' is the ID of the main region. onPostUpdate tells the function() to run after the new data is loaded. The actual widget constructor is the function in the observer. -->
<script type="text/javascript">
Spry.Data.Region.addObserver('mainRegion',{onPostUpdate:function(){var tt1 = new Spry.Widget.Tooltip('tooltip','.trigger');}});
</script>


</body>
</html>
